Scrolling Facebook Popup Like Box Widget For Blogger / Blogspot

Super wonderful Scrolling Facebook Popup Like Box Widget For Blogger / Blogspot. Now solve not working Facebook popup like box widget for blogger.and good news for also working blogger 2.0 new version. Looking so nice popup Facebook like box. Easy to add on your blogger or blogspot site. No more waste your time.Lets go for add blogger widget.

Screenshots

CSS For Facebook Popup Like Box

• Log In your blogger dashboard. Now click on -->Template-->Edit HTML
• Just click on any code.
• Press Ctr+F
• Find Now </body> code
• Copy below code & paste Before/Above </body>

<style type='text/css'>

#allaboutblogging {

position:fixed !important;

position:absolute;

top:-1000px;

left:50%;

margin:0px 0px 0px -182px;

width:300px;

height:auto;

padding:16px;

background:green;font:normal Dosis, Georgia, Serif;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

#allaboutblogging a.bsclose {

position:absolute;

top:-10px;

right:-10px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:#000000;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:25px;

cursor:pointer;

}

/* Widget by www.bloggerspice.com */

</style>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(window).bind(&quot;load&quot;, function() {

// Animate Top

$(&#39;#allaboutblogging&#39;).animate({top:&quot;50px&quot;}, 1000);

// Widget by www.bloggerspice.com

$(&#39;a.bsclose&#39;).click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

Now Add html for scrolling Facebook Popup Like Box Widget

• Click on Layout Tab Option.
• Now click on 'Add A Gadget' then select 'HTML/JavaScript' Gadget.
• Copy the below code & paste in 'HTML/JavaScript' and save It.

<div id='allaboutblogging'>

<!-- Widget by www.bloggerspice.com Start -->

<center><b><a class="BloggerSpice">Don't Forget To Join With Our Community</a></b></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FAllAboutBloggingZone&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>

<!-- Widget by www.allaboutbloggingzone.blogspot.com End -->

<a class='bsclose' href='#'>&times;</a>

<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#15d855; text-decoration:none;" href=" http://www.allaboutbloggingzone.blogspot.com/2014/09/scrolling-facebook-popup-like-box.html

">All About Blogging</a></center>

</div>

Customization 

1. You can change green   color from widget and add any kind of color name or color code. (When add color code must be use # before code. Ex #ffff)
2. Replace Facebook id right AllAboutBloggingZone

If have any problem please leave comment I will help shortly. Thank you.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →